<template>
	<view class="">

		<view class="cateheadbox">
			<u-icon name="arrow-left" size="44rpx" color="#ffffff" style="margin:0rpx 20rpx"></u-icon>
			<view class="headSearch">
				<u-search shape="round" :show-action="false"></u-search>
			</view>
			<u-icon name="list" size="44rpx" color="#ffffff" style="margin:0rpx 30rpx"></u-icon>
		</view>
		<view class="content">

			<view class="changecat">
				<view class="left">
					<u-tabs class="tabs" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<view class="right">
					<u-icon style="font-size: 40rpx;line-height: 94rpx;height: 94rpx;margin-left: 340rpx;" name="grid">
					</u-icon>
				</view>
			</view>
			<view class="list" v-for="item in goodslist" :key="item.id">
				<u-image style="width: 150rpx;height: 150rpx;" width="100%" height="300rpx" :src="item.imagePath"></u-image>
				<view class="list_right">
					<view class="right_title">
						<text>{{item.name}}</text>
					</view>
					<view class="right_bot">
						<text style="color: #FF8727; font-size: 32rpx;">{{item.integral}}<image class="jifen"
								src="@/static/jifen.png"></image></text>
						<text style="color: #999;">{{item.sellNum}}人报名</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png',
				list: [{
					name: '综合'
				}, {
					name: '销量'
				}, {
					name: '价格',
				}],
				current: 0,
				goodslist: [{
						"id": 768059791,
						"marketPrice": 4,
						"imagePath": "https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png",
						"name": "松下电动牙刷松下电动牙刷松下电动牙刷松下",
						"imageFile": "https://",
						"sellNum": 200,
						"itemPath": "https://",
						"brief": "松下电动牙刷松下电动牙刷松下电动牙刷松下",
						"integral": 800,
						"productld": 117653
					},
					{
						"id": 768059792,
						"marketPrice": 4,
						"imagePath": "https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png",
						"name": "122412松下电动牙刷松下电动牙刷松下电动牙刷松下",
						"imageFile": "https://",
						"sellNum": 269,
						"itemPath": "https://",
						"brief": "内容",
						"integral": 800,
						"productld": 117653
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-scroll-view-content {
		background-color: #F7F8FA;
	}

	.cateheadbox {
		width: 100%;
		height: 80rpx;
		background-color: #5087EF;
		line-height: 80rpx;
		display: flex;

		.headSearch {
			width: 560rpx;
			height: 60rpx;
		}
	}

	.list {
		width: 690rpx;
		height: 210rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		margin-bottom: 30rpx;
		.list_right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 450rpx;
			height: 150rpx;

			.right_title {
				line-height: 40rpx;
				font-weight: 600;
			}

			.right_bot {
				display: flex;
				justify-content: space-between;

				.jifen {
					width: 30rpx;
					height: 28rpx;
					margin-left: 10rpx;
					transform: translateY(4rpx);
				}
			}
		}
	}

	.changecat {
		width: 100%;
		height: 94rpx;
		display: flex;
		justify-content: space-between;

		.left {
			width: 288rpx;

		}

		.right {
			width: 400rpx;
		}
	}

	.content {
		min-height: 100vh;
		background-color: #F7F8FA;
		padding: 0px 30rpx;
	}
</style>
